<template>
  <div class="paper-detail">
    <el-card shadow="never" style="margin-bottom: 20px; border: none;">
      <div class="paper-detail__header">
        <el-form inline>
          <el-form-item label="排序方式">
            <el-select v-model="params.order">
              <el-option
                v-for="(item, index) in sortModeSelectOptions"
                :key="index"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
  
          <el-form-item label="姓名">
            <el-input v-model="params.username" placeholder="请输入姓名" />
          </el-form-item>
  
          <el-form-item label="成绩区间">
            <div style="display: flex">
              <el-input v-model="params.score_start" placeholder="请输入成绩" />
              <span style="margin: 0 10px">至</span>
              <el-input v-model="params.score_end" placeholder="请输入成绩" />
            </div>
          </el-form-item>
  
          <el-form-item label="是否及格">
            <el-select v-model="params.pass">
              <el-option
                v-for="(item, index) in passSelectOptions"
                :key="index"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card shadow="never" style="border: none;">
      <div class="paper-detail__header-operation">
        <el-button type="primary" @click="handleAnswerCard">导出答题卡</el-button>
      </div>
      <div class="paper-detail__body">
        <el-table
          v-loading="loading"
          :data="list"
          border
          :header-cell-style="{background: '#F5F7FA'}"
          @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"/>
          <el-table-column
            align="center"
            :label="order === 'score' ? '排名' : '交卷时间'"
            :prop="order === 'score' ? 'score_rank' : 'hand_at'"
          >
            <template v-slot="{ row, $index }">
              <span v-if="order === 'score'">
                <svg-icon
                  v-if="row.score_rank <= 3"
                  :icon-class="`ranking_${row.score_rank}`"
                  style="font-size: 24px"
                />
                <span v-else> {{ row.score_rank || $index + 1 }} </span>
              </span>
              <span v-else>{{ row.hand_at }}</span>
            </template>
          </el-table-column>
  
          <el-table-column align="center" label="分数" prop="score" />
  
          <el-table-column align="center" label="姓名" prop="user">
            <template v-slot="{ row }">
              {{ row.user.username }}
            </template>
          </el-table-column>
  
          <el-table-column align="center" label="岗位" prop="user">
            <template v-slot="{ row }">
              {{ row?.user?.userCompany?.position?.name || '暂无职位' }}
            </template>
          </el-table-column>
  
          <el-table-column
            align="center"
            :label="order !== 'score' ? '排名' : '交卷时间'"
            :prop="order !== 'score' ? 'score_rank' : 'hand_at'"
          >
            <template v-slot="{ row }">
              <span v-if="order !== 'score'">
                <!--              <svg-icon-->
                <!--                v-if="row.score_rank <= 3"-->
                <!--                :icon-class="`ranking_${row.score_rank}`"-->
                <!--                style="font-size: 24px"-->
                <!--              />-->
                <span> {{ row.score_rank }} </span>
              </span>
              <span v-else>{{ row.hand_at }}</span>
            </template>
          </el-table-column>
  
          <el-table-column align="center" label="答题详情">
            <template v-slot="{ row }">
              <el-button type="text" @click="handleViewDetails(row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
  
      <div class="paper-detail__footer">
        <Pagination :total="total" :limit="params.paginate" @pagination="pagination" />
      </div>
    </el-card>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { getCoursePaperDetails } from '@/api/train'
import { exportAnswerCard } from '@/api/examination'
import { isArray } from '@/utils/validate'
export default {
  name: 'PaperDetailNew',
  components: {
    Pagination
  },
  data() {
    return {
      list: [],
      total: 0,
      order: 'hand_at',
      user_id:[],
      multipleSelection: [],
      loading: false,
      params: {
        course_id: 101,
        paper_id: 19,
        order: 'hand_at',
        sort: 'desc',
        page: 1,
        paginate: 10,
        username: null,
        score_start: null,
        score_end: null,
        pass: null
      },
      sortModeSelectOptions: [
        { value: 'hand_at', label: '交卷时间' },
        { value: 'score', label: '排名' }
      ],
      passSelectOptions: [
        { value: 1, label: '及格' },
        { value: 0, label: '不及格' }
      ]
    }
  },
  created() {
    const { course_id, paper_id } = this.$route.query
    this.params.course_id = course_id
    this.params.paper_id = paper_id
    this.initData()
  },
  methods: {
    async initData() {
      this.loading = true
      try {
        const res = await getCoursePaperDetails(this.params)
        this.list = res.data
        this.total = res.meta.total
      } catch (error) {
        this.$message.error(error.message || '列表查询失败')
      } finally {
        this.loading = false
      }
    },
    pagination(e) {
      this.params.page = e.page
      this.params.paginate = e.limit
    },
    handleSearch() {
      this.params.page = 1
      this.order = this.params.order
      // if (this.order === 'score') {
      //   this.params.sort = 'desc'
      // } else {
      //   this.params.sort = 'asc'
      // }
      this.initData()
    },
    reset() {
      this.params = this.$options.data().params
      this.order = 'hand_at'
      this.initData()
    },
    handleViewDetails(row) {
      console.log(row, 'row')
      this.$router.push({
        path: `/answer/detail/${row.id}`
      })
    },
    async handleAnswerCard(){
      if (this.multipleSelection.length>0) {
        this.multipleSelection.forEach(item=>{
          this.user_id.push(item.user_id)
        })
      }else{
        return this.$message.error('请选择需要导出答题卡的用户')
      }
      const params={
        paper_id:this.$route.query.paper_id,
        user_id:JSON.stringify(this.user_id),
        course_id:this.$route.query.course_id,
      }
      try {
        const res=await exportAnswerCard(params)
        window.open(res.data.path)
        this.$message.success('导出成功')
        console.log(res);
      } catch (err) {
        this.$message.error('导出失败')
      }
    },
    handleSelectionChange(val){
      this.multipleSelection=val
    }
  }
}
</script>
<style lang="scss" scoped>
.paper-detail {
  padding: 20px;
  &__footer {
  }
  &__header-operation {
    padding: 0 0 20px 0;
  }
}
</style>
